/* =================
   Fade Transitions
   ================= */
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity ease-in;
}

.fade-enter-from,
.fade-leave-to {
  @apply opacity-0;
}

/* ===================
      Slide Transitions
      =================== */
.slide-left-leave-active,
.slide-left-enter-active {
  @apply transition duration-500 ease-in;
}

.slide-left-leave-to {
  @apply absolute left-0 w-full translate-x-full opacity-0;
}

.slide-left-enter-from {
  @apply absolute left-0 w-full -translate-x-full opacity-0;
}

/* =================
      List Transitions
      ================= */
.list-move,
.list-enter-active,
.list-leave-active {
  @apply transition duration-500 ease-in;
}

.list-enter-from,
.list-leave-to {
  @apply translate-x-10 opacity-0;
}

/* =================
       Slide Down Transitions
       ================= */
.slide-down-enter-active,
.slide-down-leave-active {
  @apply transition ease-in;
}

.slide-down-enter-from {
  @apply -translate-y-3 opacity-0;
}

.slide-down-leave-to {
  @apply translate-y-1 opacity-0;
}

/* =================
       Sidebar Transitions
       ================= */
.sidebar-enter-active,
.sidebar-leave-active {
  @apply transition ease-in;
}

.sidebar-enter-from {
  @apply -translate-x-full opacity-0;
}

.sidebar-leave-to {
  @apply -translate-x-full opacity-0;
}

/* =================
       Periodic Table Transitions
       ================= */
.ptable-transition-enter-active,
.ptable-transition-leave-active {
  @apply transition duration-500 ease-in-out;
  transform-origin: 90% top;
}

.ptable-transition-enter-from,
.ptable-transition-leave-to {
  @apply scale-0 opacity-0;
}

/* =================
   Slide Up Transitions (Apple Style)
   ================= */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
